<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		p{position: relative;}
		p a{
			display: block;float: left;width: 100px;
			height: 20px;text-align: center;
			background: #eee;margin-left: 20px;
			left:-20px;top:50%;text-decoration: none;color:#fff;
			border-radius: 5px;padding:10px 0px;
		}
		p a.cur{background: #333;}
	</style>
</head>
<body>
<div id="app">
	<ul>
		<li v-for="item in filterTodos" >{{ item.title }}</li>
	</ul>
	<p>
		<a :class="{cur:filterStat === 'all'}" href="#/">all</a>
		<a :class="{cur:filterStat === 'active'}" href="#/active">active</a>
		<a :class="{cur:filterStat === 'completed'}" href="#/completed">completed</a>
	</p>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var app = new Vue({
	el : '#app',
	
	data : {
		filterStat : 'all',
		todos : [
			{id : 1, title : 'a', completed : true},
			{id : 2, title : 'b', completed : false},
			{id : 3, title : 'c', completed : false},
			{id : 4, title : 'd', completed : true},
			{id : 5, title : 'e', completed : true}
		]
	},

	computed : {
		filterTodos:function(){
			switch (this.filterStat) {
				case 'active':
					return this.todos.filter(item => ! item.completed)
					break;
				case 'completed':
					return this.todos.filter(item => item.completed)
				default:
					return this.todos
					break;
			}
		}
	},

	methods : {}
})

window.onhashchange = function(){
	var hash = window.location.hash.trim()
	app.filterStat = hash.substr(2) || 'all'
}

window.onhashchange()
</script>
</body>
</html>